<template>
  <div>
    <p style="text-align: center">评价页面</p>

    <!-- tab 切换 -->
    <van-tabs v-model="active">
      <van-tab :title="'全部' + ' ' + '(' + commentList1.total + ')'">
        <van-row class="container" v-for="item in commentList1.list" :key="item.id">
          <div class="top">
            <div class="left">
              <img :src="item.userInfo.avatarUrl" alt="" />
            </div>
            <div class="right">
              <span>{{ item.addTime }}</span>
            </div>
          </div>
          <div class="body">
            <p>{{ item.content }}</p>
            <!-- 图片 -->
            <div><img :src="time" alt="" v-for="time in item.picList" :key="time.id" /></div>
          </div>
        </van-row>
      </van-tab>

      <van-tab :title="'有图' + ' ' + '(' + commentList2.total + ')'"
        ><van-row class="container" v-for="item in commentList2.list" :key="item.id">
          <div class="top">
            <div class="left">
              <img :src="item.userInfo.avatarUrl" alt="" />
            </div>
            <div class="right">
              <span>{{ item.addTime }}</span>
            </div>
          </div>
          <div class="body">
            <p>{{ item.content }}</p>
            <!-- 图片 -->
            <div><img :src="time" alt="" v-for="time in item.picList" :key="time.id" /></div>
          </div>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'YanxuanshangchengEvaluationpage',

  data() {
    return {
      active: 2,
      //  全部数据97
      commentList1: [],
      // 有图数据 34
      commentList2: [],
      title: ''
    }
  },

  mounted() {
    // 接收路由传来的值
    console.log(this.$route.query.id)
    this.getcommentList1()
    this.getcommentList2()
  },

  methods: {
    async getcommentList1() {
      const { data: res } = await this.$get(this.$api.commentList, {
        type: 0,
        valueId: this.$route.query.id,
        showType: 0
        // page: 10,
        // limit: 10
      })
      if (res.errno !== 0) {
        return
      }
      this.commentList1 = res.data
      console.log(this.commentList1)
    },
    async getcommentList2() {
      const { data: res } = await this.$get(this.$api.commentList, {
        type: 0,
        valueId: this.$route.query.id,
        showType: 1
        // page: 10,
        // limit: 10
      })
      if (res.errno !== 0) {
        return
      }
      this.commentList2 = res.data
      console.log(this.commentList2)
    }
  }
}
</script>

<style lang="less" scoped>
// 内容区域
.container {
  .top {
    display: flex;
    justify-content: space-between;
    padding: 0 2rem 0 2rem;
    align-items: center;
    img {
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
    }
  }
  .body {
    > div {
      display: flex;
      p {
        padding: 0 2rem 0 2rem;
      }
      img {
        width: 10rem;
        height: 10rem;
        padding: 0 2rem 0 2rem;
      }
    }
  }
}
</style>
